<template>
  <div>鼠标移动到指定位置，按键盘A，识别当前位置颜色</div>
  <div>{{ colorInfo }}</div>
  <!-- <el-button @click="testColor">识别颜色</el-button> -->

  <!-- <div>{{ viewName }}</div>
  <el-button @click="testView">识别界面</el-button> -->
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { ElMessage } from "element-plus";

import robotjs_ipc, {
  ECommonColor,
  View,
  ViewColorFeature,
} from "../utils/robotjs_ipc";
@Options({
  components: {},
})
export default class ColorRecognition extends Vue {
  colorInfo = "";
  viewName = "";
  mounted() {
    document.addEventListener("keydown", this.onPressKey);
  }
  onPressKey(e: any) {
    // console.log("您按下的按钮的keyCode为1：" + e.keyCode);
    if (e.keyCode == 65) {
      this.testColor();
    }
  }
  unmounted() {
    document.removeEventListener("keydown", this.onPressKey);
  }
  async testColor() {
    const pos = await robotjs_ipc.getMousePos();
    const color = await robotjs_ipc.getPixelColor(pos.x, pos.y);
    this.colorInfo = `(pos:${pos.x},${
      pos.y
    })(颜色：${robotjs_ipc.getCommonColorName(
      robotjs_ipc.rgbToCommonColor(robotjs_ipc.hexToRgb(color))
    )})(hex:${color})`;
    //console.log(await robotjs_ipc.getMousePosColor());
    console.log(this.colorInfo);
    
  }

  views: View[] = [
    new View("桌面", [
      new ViewColorFeature(29, 1177, ECommonColor.White),
      new ViewColorFeature(44, 29, ECommonColor.Blue),
      new ViewColorFeature(1298, 562, ECommonColor.Black),
    ]),
  ];

  async testView() {
    for (let index = 0; index < this.views.length; index++) {
      const view = this.views[index];
      if (await view.isCurrentView()) {
        this.viewName = view.name;
        console.log(view.name);
        return;
      }
    }
    this.viewName = "不认识";
  }
}
</script>

<style scoped>
</style>
